In Svelte, a store is a reactive object that holds a value and allows different components to share and update state easily. Stores are especially useful for managing global or shared data without having to pass props down through many layers of components.
Centralized state management for complex apps.
Avoids deeply nested prop drilling between components.
Built-in reactivity — components automatically update when the store changes.
Simple, lightweight alternative to libraries like Redux or Vuex.
Svelte provides the writable store for values that can change over time. You can create one using the writable function from the svelte/store module.
To use the store inside a Svelte component, import it and use the $ prefix. This automatically subscribes the component to the store and updates the UI whenever the store's value changes.
Svelte also provides two other store types:
- Readable Store: For values that can be read but not directly modified by components (e.g., data from an API).
- Derived Store: For creating new values based on other stores.
Use the
$prefix to auto-subscribe to stores in Svelte templates.Writable stores allow both reading and updating data.
Readable stores are read-only, perfect for external data sources.
Derived stores let you compute values based on one or more stores.